


body{ 
	background:linear-gradient(to bottom,#010101 0%,#222 100%);
    padding:0;margin:0;
	box-sizing:border-box;
	width:100%;height:100%;
	user-select:none;
    scrollbar-width:none;
    -ms-overflow-style:none; 
	  background:linear-gradient(to bottom right,#5B6161 0%,#9A9D9E 100%);  
}
h2{padding:0;margin:0;}
::scrollbar{display:none;}
::-webkit-scrollbar{display:none;width:0px;}
::-webkit-scrollbar-thumb{background:transparent;}
::-moz-scrollbar{display:none;width:none;}
@-moz-document url-prefix(){
	body{
		scrollbar-width:none;
	}
}


.pages_outer{
    height:fit-content;
    background:rgba(255,255,255,0.0); 	
    padding-left:0vw;
    box-sizing:box-sizing;
    width:100vw; 
    overflow:visible;
}
.pages{ 
    width:fit-content;
    display:flex;
    overflow:hidden;
    width:100%; 
    margin-right:20vh;
    padding-right:20vh;
    box-sizing:border-box;
}
 
.OnePage{  
    background:10vh;
    border:0px solid rgba(255,255,255,0.2);
    margin-right:0vh;
    height:70vh;
    width:calc(70vh * 0.520833);
    min-width:calc(70vh * 0.520833);
    display:flex;justify-content:center;align-items:center;
    /* overflow-y:scroll; */
    top:0px; 
    scrollbar-width:none;
    -ms-overflow-style:none; 
    position: relative;
}  
.OnePage:first-child{
    margin-left:2vh;
}
.OnePage:last-child{
    margin-right:10vh;
}
.OnePage img{
    width:100%;
    height:fit-content;
}
.loading_circle{
    font-size:1vh;margin-top:2vh;font-weight:light;
    letter-spacing:1px;
    font-family:Arial;
}
.PhoneContent{
    position:relative;overflow:hidden;box-shadow:2vh 2vh 2vh rgba(0,0,0,0.2);
}
.myScrollBar{
    width:94vw;
    box-sizing: border-box;
    margin-left:3vw;
    margin-right:3vw;
    margin-top:2vh;
    height:1.4vh;
    border-radius:999px; 
    position:relative;
}
.myScrollBarInner{
    background:#fff;
    width:20%;
    height:100%;
    border-radius:999px; 
    box-sizing: border-box;
    cursor:pointer;
} 
.myScrollBarInner:hover{
    background:linear-gradient(to right,#FF9900 0%,#00FFFF 100%);
}
.model{ 
    width:100%;height:100%;max-width:100%;z-index:89;
    overflow:hidden;
    background:none;
} 
.model_white:after{
    position:absolute;
    z-index:299;
    content:'';
    left:0;
    top:0;
    width:100%;
    height:100%;
     background-image:url("images/Model-000.png");
    background-position:0 0;
    background-size:100% 100%;
    pointer-events: none;
}
.model_black:after{
    position:absolute;
    z-index:299;
    content:'';
    left:0;
    top:0;
    width:100%;
    height:100%;
     background-image:url("images/Model-Black.png");
    background-position:0 0;
    background-size:100% 100%;
    pointer-events: none;
}
.BottomNavOuter{
    z-index:12;position:absolute;left:0;bottom:0;width:100%;
    height:calc(1.6% + 1px);display:flex;
    align-items:center;justify-content:center;
}
.BottomNavLine_black{
    min-width:30%;
    min-height:20%;
    width:30%;
    height:25%;
    background:black;border-radius:999px;
    opacity:0.8;
}
.BottomNavLine_white{
    min-width:30%;
    min-height:20%;
    width:30%;
    height:25%;
    background:white;border-radius:999px;
    opacity:0.5;
}

.phoneTopBarOuter{
    pointer-events:none;position:absolute;left:0;top:0;
    width:100%;
    height:3.8%;z-index:112;
}
.phoneTopBar{
    display:flex;
    position:relative;width:100%;height:100%;
    align-items: center;
}
.phoneTopBar img{
    width:fit-content;
    height:70%;
}
.phoneTopBarLR{
    height:100%;
}
.phoneTopBarLR img{
    /* background:blue;  */
    height:45% !important;
}

.phoneTopBarTime{
    margin-left:-2%;
    margin-right:2%;
    display:flex;flex-direction:row;align-items:center;justify-content:end; 
}

.phoneTopBarSWB{
    display:flex;flex-direction:row;
    align-items:center;
    justify-content:start;
}
 

.phoneContentLayer{
    pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;
}
.phoneContentLayerInner{
    position:relative;width:100%;height:100%;
}
.phoneMajorPage{
    position:absolute;left:0;top:0;width:100%;height:100%;
    background:#000;
    z-index:11;
}
.model img{
    width:100%;
    height:fit-content;
}
.phoneMajorPageInner{
    position:relative;width:100%;height:100%;overflow-y:scroll;
    scrollbar-width:none;
    -ms-overflow-style:none; 
 
}
/* .phoneMajorPage::before{
    content:'';
    position:absolute;
    left:-4px;
    top:-4px;
    width:100%;
    height:100%;
    z-index:99;
    border:4px solid red;
} */
.PopupDialog{
    background:rgba(0,0,0,0.7);
    z-index:999;
    display:flex;
    justify-content: center;
    align-items:center;
    left:0;top:0;width:100%;height:100%;
    position:fixed;
    display:none;
     /* backdrop-filter: blur(10px); */
}



.ZoomPreview{
    height:95vh;
    width:calc(95vh * 00.52083);
    min-width:calc(95vh * 00.52083);
 
    border-radius:20px;
    margin-right:0vh; 
    display:flex;justify-content:center;align-items:center; 
    top:0px; 
    scrollbar-width:none;
    -ms-overflow-style:none; 
    position: relative;
}
.ZoomPreviewNavButton{
    width:8vh;
    height:8vh;
    background:rgba(255,255,255,0.5);
    border-radius:999px;
    transition: all 0.3s;
    display:flex;flex-direction:row;align-items:center;justify-content:center;
    backdrop-filter: blur(10px);
}
.ZoomPreviewNavButton:hover{
    background:#fff;
    cursor:pointer;
}
.ZoomPreviewNavButton:active{
    transform: scale(0.9);
}
.ZoomPreviewNavButton img{
    width:50%;height:50%;
    pointer-events:auto;


}
.time_icon{
    width:fit-content;height:30%;
    margin-right:4%;
}

.PCTopBar{
    box-sizing:border-box;height:12vh;background:none;align-items:center;padding:0vw 4vh;
    width:100%;
}
.PCTopBar h2{
    font-family:Arial;color:white;font-weight:800;font-size:5vh;letter-spacing:0;
}
.PCTopBar p{
    margin-left:10px;padding-top:10px;font-size:2vh;
}
.PCTopBar button{
    cursor:pointer;
    outline:none;
    background:rgba(255,255,255,0.1);
    border-radius:999px; 
    border:0;
    padding:1vh 3vh;
    font-size:1.8vh;
    color:#fff;
    transition: all 0.3s;
}
.PCTopBar button:hover{
    transform: scale(1.05);
    background:linear-gradient(to right,#FF9900 0%,#00FFFF 100%);
    color:white;
    font-weight:bold;
}
.PCTopBar button:active{
    transform: scale(0.9);
}
.IconUI{
    display:flex;justify-content: center;align-items: center;
    font-size:2.8vh;
    font-weight:800;
    color:#fff;
    width:4.8vh;
    height:4.8vh;
    border-radius:1.3vh;
    background:white;
    margin-right:1vh;
    background:linear-gradient(to bottom right,#FF9900 0%,#00FFFF 100%);
}
.Nav{
    display:flex;
    align-items:center;
    padding:0vw 4vh;
    margin-bottom:2vh;
    position:relative;
    height:6vh;
}
.NavItem{
    font-size:1.5vh;
    margin-right:2vh;
    opacity:0.7;
    font-weight:normal;
    line-height:100%;
    border:0.1vh solid rgba(255,255,255,0.3);
    padding:1vh 2vh;
    border-radius:999px;
    transition: all 0.3s;
    letter-spacing:1px;
    cursor:pointer;
}
.NavItem:hover{
    border:0.1vh solid rgba(255,255,255,0.8);
}
.NavItemActive{
    font-size:1.8vh;
    font-weight:800;
    border:0.3vh solid rgba(255,255,255,0.6) !important;
    padding:1vh 3vh !important;
    opacity: 1.0 !important;
}
 
.Nav h2{
    font-size:3vh;
    padding:0;margin:0;
}
.Nav p{
    font-size:2.5vh;
    padding:0;margin:0;
}

@keyframes move-forever {
    0% {
      transform: translate3d(-90px, 0, 0);
    }

    100% {
      transform: translate3d(85px, 0, 0);
    }
  }

  .waves {
    position: relative;
    width: 100%;
    height: 35vh;
    margin-bottom: 0;
    /*Fix for safari gap*/
    min-height: 30vh;
    max-height: 50vh;
  } 
  .parallax>use {
    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  }

  .parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }

  .parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  }

  .parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  }

  .parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  }